<?php
/**
 * Created by PhpStorm.
 * User: huangjun
 * Date: 16/6/22
 * Time: 上午11:03
 */

use yii\helpers\Html;

?>


<div class="content free"  id="all_free">
        <div class="free_bg">

                <div  class="free_box">
                    <div class="free_name">
                        <div class="free_name_text"></div>
                        <input type="text" maxlength="50" class="free_name_input" placeholder="宝贝姓名"/>
                    </div>
                    <div class="free_mobile">
                        <div class="free_mobile_text"></div>
                        <input type="tel" maxlength="20" class="free_mobile_iput" placeholder="手机号码" />
                    </div>
                    <div class="free_btn" >
                        <div class="free_btn_text"></div>
                    </div>
                </div>
        </div>
</div>
<style>
    .free{
        width: 100%;
        height: 100%;
    }
    .free_bg{
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        background-image: url("../images/all_people_free_20170605/bottom.jpg");
        position: relative;
    }

    .free_box_success{
        background-image: url("../images/all_people_free_20170605/success_3.png");
        width: 80%;
        height: 150px;
        position: absolute;
        top: 66%;
        left: 10%;
        background-size: 100% 100%;
    }
    .free_name{
        position: absolute;
        width: 90%;
        height: 50px;
        top:65%;
        left: 5%;
        /*background-color: #fff;*/
        /*border-radius: 30px;*/
        background-image: url("../images/all_people_free_20170605/elm/input.png");
        background-size: 100% 100%;
    }
    .free_name_input{
        /*background-color: #ccc;*/
        width: 70%;
        height: 40px;
        border: none;
        position: absolute;
        top:5px;
        left:20%;
    }
    .free_name_text{
        position: absolute;
        width: 8%;
        height: 20px;
        top: 15px;
        left: 5%;
        background-image: url("../images/all_people_free_20170605/elm/name.png");
        background-size: 100% 100%;
    }
    .free_mobile{
        position: absolute;
        width: 90%;
        height: 50px;
        top:75%;
        left: 5%;
        /*background-color: #ffffff;*/
        /*border-radius: 30px;*/
        background-image: url("../images/all_people_free_20170605/elm/input.png");
        background-size: 100% 100%;
    }
    .free_mobile_iput{
        position: absolute;
        border: none;
        /*background-color: #00AA88;*/
        width: 70%;
        height: 40px;
        left: 20%;
        top: 5px;
    }
    .free_mobile_text{
        position: absolute;
        width: 8%;
        height: 20px;
        top: 15px;
        left: 5%;
        background-image: url("../images/all_people_free_20170605/elm/mobile.png");
        background-size: 100% 100%;
    }

    .free_btn{
        position: absolute;
        width: 90%;
        height: 50px;
        top:89%;
        left: 5%;
        background-image: url("../images/all_people_free_20170605/elm/confirm.png");
        background-size: 100% 100%;
    }
    /*.free_btn_text{*/
        /*position: absolute;*/
        /*width: 30%;*/
        /*height: 20px;*/
        /*top: 15px;*/
        /*left: 35%;*/
        /*background-image: url("../images/all_people_free_20170605/elm/yuyue.png");*/
        /*background-size: 100% 100%;*/
    /*}*/
</style>

<!-- Javascript -->
<script src="http://cdn.staticfile.org/jquery/3.0.0/jquery.min.js"></script>
<script type = 'text/javascript'>
    $(function () {
        var from = '<?=$from?>';
        $('body').css('overflow','scroll').height($(window).height() + 'px');
        $('input').on('focus',function(event){
            //自动反弹 输入法高度自适应
            var target = this;
            setTimeout(function(){
                target.scrollIntoView();
            },100);
        });

//        delCookie('mobile');  //测试时使用
        if(getCookie('mobile') != null){
            $('.free_box').children().remove();
            $('.free_box').addClass('free_box_success')
        }

        $(document).on('click', '.free .free_btn', function () {
            var name = $.trim($('.free .free_name_input').val());
            var mobile = $('.free .free_mobile_iput').val();

            if(name == ""){
                alert("姓名不能为空!", "", "error");
                return false;
            }

            var myreg = /^(((13[0-9]{1})|(17[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if(!myreg.test(mobile))
            {
                alert('请输入有效的手机号码！');
                return false;
            }

            var param = {
                'name': name,
                'mobile': mobile,
                'from':from
            };
            $.post('do-free',param, function(res){
                var result = JSON.parse(res);
                if(result.error == 0) {
                    alert('提交成功');
                    setCookie('mobile',param.mobile)
                    $('.free_box').children().remove();
                    $('.free_box').addClass('free_box_success')

                } else if(result.error == 2){
                    alert('此手机号已经预约过！');
                    $('.free_box').children().remove();
                    $('.free_box').addClass('free_box_success')
                }else {
                    alert('error');
                }
            });
        });
    })


    //JS操作cookies方法!
    //写cookies
    function setCookie(name,value)
    {
        var Days = 30;
        var exp = new Date();
        exp.setTime(exp.getTime() + Days*24*60*60*1000);
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
    }

    //读取cookie
    function getCookie(name)
    {
        var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
        if(arr=document.cookie.match(reg))
            return unescape(arr[2]);
        else
            return null;
    }

    // 删除cookie
    function delCookie(name)
    {
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        var cval=getCookie(name);
        if(cval!=null)
            document.cookie= name + "="+cval+";expires="+exp.toGMTString();
    }
    /*
    //使用示例
    setCookie("name","hayden");
    alert(getCookie("name"));
    //如果需要设定自定义过期时间
    //那么把上面的setCookie　函数换成下面两个函数就ok;
    //程序代码
    function setCookie(name,value,time)
    {
        var strsec = getsec(time);
        var exp = new Date();
        exp.setTime(exp.getTime() + strsec*1);
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
    }
    function getsec(str)
    {
        alert(str);
        var str1=str.substring(1,str.length)*1;
        var str2=str.substring(0,1);
        if (str2=="s")
        {
            return str1*1000;
        }
        else if (str2=="h")
        {
            return str1*60*60*1000;
        }
        else if (str2=="d")
        {
            return str1*24*60*60*1000;
        }
    }
    //这是有设定过期时间的使用示例：
    //s20是代表20秒
    //h是指小时，如12小时则是：h12
    //d是天数，30天则：d30
    setCookie("name","hayden","s20");*/



</script>